<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>SOTS后台管理</title>
		{% load static %}
		<script src="{% static 'bootstrap-3.3.7-dist/js/jquery-3.2.1.js' %}" type="text/javascript" charset="utf-8"></script>
		<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap-select.js' %}" type="text/javascript" charset="utf-8"></script>
		<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.css' %}" />
		<link rel="stylesheet" type="text/css" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap-select.css' %}" />
		<script type="text/javascript">
            $(window).on('load', function () {
                $('.selectpicker').selectpicker({
                    'selectedText': 'cat'
                });
            });


		</script>
		<style type="text/css">
			.tab-content {
				padding: 3rem 1rem;
				border: 1px solid #ddd;
				border-top: none;
			}
			
			.glyphicon {
				color: #dcd7d7;
				padding: 0 9px;
			}
			
			a {
				color: #333;
			}
			
			.well {
				margin-top: 4rem;
			}
			
			.panel-group .panel+.panel {
				margin-top: 0;
			}
			
			.panel-noPM {
				/* border-color: #ddd; */
				border: none;
				margin-top: 0px;
			}
			
			em {
				padding-left: 8px;
			}
			
			#positionNum {
				font-style: italic;
				padding: 0 10px;
				color: #ccc;
				font-size: 28px;
				font-weight: bolder;
			}
			.p1{
				padding-left: 100px;
				font-size: 18px;
				font-family: 微软雅黑;
			}
            .na{
                color: red;
                background: paleturquoise;
            }
		</style>
	</head>

	<body>
		<div class="container-fluid">

			<!--主题内容部分 start-->
			<div class="row clearfix">
				<!--主体内容 start-->
				<div class="col-md-10 column">
					<!--爬取信息 start-->
					<div class="tabbable" id="tabs-130431">
						<!--选项卡 start-->
						<ul class="nav nav-tabs">
							<li class="active">
								<a href="#panel-738579" data-toggle="tab">添加任务</a>
							</li>
							<li>
								<a href="{% url 'list_crawler_job' %}">任务列表</a>
							</li>
						</ul>
						<!--选项卡 end-->
						<!--选型卡内容主体 start-->
						<div class="tab-content">
							<div class="tab-pane active" id="panel-738579">
								<!--搜索表单 start-->
								<form role="form" class="form-horizontal" method="post" action="{% url 'start_spider' %}">
									{% csrf_token %}
									<div class="form-group">
										<p class="p1">关键字爬取:</p>
										<label for="id_select" class="col-sm-2 control-label">目标网站</label>
										<div class="col-sm-8">
                                            <select id="id_select" name="spider" class="selectpicker bla bla bli">
                                                {% for info in infos %}
                                                <option value="{{ info.spider }}">{{ info.name }}</option>
                                                {% endfor %}
                                            </select>

										</div>
									</div>
<br>
									<div class="form-group">
										<label for="keyword" class="col-sm-2 control-label">职位</label>
										<div class="col-sm-8">
											<input type="text" class="form-control" name="keyword" id="keyword" >
										</div>
									</div>

									<div class="form-group">
										<label for="start" class="col-sm-2 control-label">开始页</label>
										<div class="col-sm-8">
											<input type="text" class="form-control" name="start_page" value="1" id="start" >
										</div>
									</div>

									<div class="form-group">
										<label for="biggest" class="col-sm-2 control-label">页数</label>
										<div class="col-sm-8">
											<input type="text" class="form-control" name="max_allow_page" placeholder="默认爬至尾页" id="biggest" >
										</div>
									</div>

									<div class="form-group">
										<label for="delayTime" class="col-sm-2 control-label">开始时间</label>
										<div class="col-sm-8">
											<input type="text" class="form-control" name="start_time" id="delayTime" placeholder="格式：2018-3-24 10:25:30">
										</div>
									</div>

									<div class="form-group">
										<label for="timeSelect" class="col-sm-2 control-label">频率</label>
										<div class="col-sm-8">
											<select class=" form-control timeSelect" name="interval_time">
												<option value="1">默认1小时</option>
												<option value="5">5小时</option>
												<option value="24">1天</option>
												<option value="48">2天</option>
											</select>
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-offset-2 col-sm-8">
											<button type="submit" class="btn btn-default" onclick="turnWords(this)">添加</button>
										</div>
									</div>
								</form>
								<!--搜索表单 end-->

						</div>
						<!--选型卡内容主体 end-->

                        </div>

					</div>
					<!--爬取信息 end-->
				</div>
				<!--主体内容 end-->
			</div>
			<!--主题内容部分 end-->
		</div>
        </div>
        <script>
			function onaddItem() {
				var temp = '\
							<div class="form-group">\
								<label for="position" class="col-sm-2 control-label">职位</label>\
								<div class="col-sm-8">\
									<input type="text" class="form-control" class="position" placeholder="职位">\
								</div>\
							</div>\
							';
				$(".positionDiv").after(temp);
			}

		</script>
	</body>

</html>